<template>
  <el-row style="height: 100%">
    <el-col class="operation" :xs="12" :sm="1">
      <i class="el-icon-s-operation" @click="$emit('hideAside')"></i>
    </el-col>
    <el-col class="operation hidden-xs-only" :offset="1" :xs="16" :sm="20">
      <el-input
        v-if="$route.name !== 'profile'"
        v-model="input"
        @change.native.enter="searchStudent"
        placeholder="请输入学生姓名搜索"
      ></el-input>
    </el-col>
    <el-col class="operation" :xs="12" :sm="2">
      <el-row type="flex" align="center" style="width: 100%">
        <el-col :xs="20" :sm="14">
          <el-badge
            v-if="isNotRead"
            @click.native="jumpToPostman"
            is-dot
            class="item hidden-xs-only"
          >
            <i class="el-icon-bell"></i>
          </el-badge>
          <i v-else class="el-icon-bell"></i>
        </el-col>
        <el-col class="profile" :span="10">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-avatar :src="avatar"> </el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">
                <router-link
                  to="/profile"
                  tag="li"
                  v-if="
                    userInfo.role === 'teacher' || userInfo.role === 'student'
                  "
                  >我的简历</router-link
                >
              </el-dropdown-item>
              <el-dropdown-item command="b" @click.native="logout"
                >登出</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { mapState, mapActions } from "vuex";

import request from "@/api/request";

import { loginOutApi } from "@/api/api_constant";

import { useLogOut } from "@/hooks/login";
import { useGetPostman } from "@/hooks/controlBoard";

export default {
  name: "Header",
  props: ["avatar"],
  data() {
    return {
      postList: [],
      isNotRead: false,
      input: "",
      isMobile: false,
    };
  },
  mounted() {
    (async () => {
      this.postList = (
        await useGetPostman(this.userInfo._id)
      ).data?.postmans?.sort((a, b) => {
        return a.readSatus - b.readSatus;
      });
      this.isNotRead = this.postList?.some((cur) => {
        return cur.readSatus === 0;
      });
      this.setPosts(this.postList || []);
    })();
  },
  computed: {
    ...mapState("user", ["token", "loginType", "userInfo"]),
    ...mapState("posts", ["posts"]),
  },
  methods: {
    ...mapActions("user", [
      "setToken",
      "setLoginType",
      "setUserInfo",
      "setExpire",
    ]),
    ...mapActions("posts", ["setPosts"]),
    jumpToPostman() {
      if (this.$route.name !== "postman") {
        this.$router.push({
          name: "postman",
        });
      }
    },
    searchStudent() {
      if (this.$route.path === "/student") {
        return this.$message.warning("请在下方界面的搜索框中搜索");
      }
      if (this.input) {
        this.$confirm("确定要搜索名为" + this.input + "的学生吗?", "搜索学生", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push({
              name: "student",
              query: {
                searchContent: encodeURIComponent(this.input),
              },
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消搜索",
            });
          });
      } else {
        this.$router.replace({
          name: "student",
        });
      }
    },
    logout() {
      this.$confirm("您确定要退出吗?", "退出登录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const resInfo = await request.get(loginOutApi, {
              params: {
                id: this.userInfo._id,
                loginType: this.loginType,
              },
            });
            useLogOut(this, resInfo.data);
          } catch (error) {
            this.$message.error("连接超时，请开启后台接口服务器");
            loadingInstance1.close();
          }
        })
        .catch(() => {
          this.$message.warning("您取消了登出操作");
        });
    },
  },
};
</script>

<style lang="scss">
.operation {
  .el-icon-bell {
    color: #ccc;
  }
  .profile {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      vertical-align: middle;
    }
  }
  .el-badge__content.is-fixed.is-dot {
    right: 11px;
    top: 10px;
  }
  font-size: 35px;
  display: flex;
  height: 100%;
  color: #08f;
  cursor: pointer;
  align-items: center;
  .el-input {
    width: 300px;
    .el-input__inner {
      border-radius: 30px;
      &:focus {
        border: 1px solid #ddd;
        box-shadow: 0 2px 5px #eee;
      }
    }
  }
}
</style>
